//封装分类数据业务相关代码
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getTopCategoryAPI } from '@/apis/category'

export function useCategory() {
  //问题导入：由于路由参数的变化使得生命周期不存在了，因此需要使用路由的onBeforeRouteUpdate周期函数来监听是否变化，to里面带的有参数
  //这样我们只监听路由跳转到哪里，banner轮播图还是一样没有生命周期只加载了一次，无论点哪里都是最初加载过一次的banner这样就达到了减少性能需求
  const categoryData = ref({})
  const route = useRoute()
  //"id = route.params.id"表示如果不传值会有一个默认的id值
  const getCategory = async (id = route.params.id) => {
    // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    const res = await getTopCategoryAPI(id)
    categoryData.value = res.result
  }
  onMounted(() => { getCategory() })

  //目标：路由参数变化的时候可以把分类数据接口重新发送
  onBeforeRouteUpdate((to) => {
    //console.log(to)
    //存在问题：使用最新的路由参数请求最新的分类数据
    getCategory(to.params.id)

  })

  //把需要的数据返回出去
  return {
    categoryData,
  }






}





